<template>
    <div class="container">
        <div class="title">{{title}}</div>
        <ul>
            <li v-for="item, index in data" :key="index + ''">
                <img :src="getUrl(item.pic)" />               
                <p>{{(item.name || item.title) }}</p>
            </li>
        </ul>
    </div>
</template>
    
<script setup>
//setup中子组件使用defineProps接收父页面传递的参数
defineProps({
    title:String,
    data: Array
})

const getUrl = (url) => {
    return import.meta.env.VITE_API_URL + "/" + url;
}
</script>
    
<style scoped>
.container {
    margin-top: 20px;
    width:90%;
    margin:0 auto;
}

ul {
    border: 1px dotted grey;  
    border-radius: 10px;     
   
    padding-left: 0;
}
li {
    display: inline-block;
    width: 18%;
    height: 100px;
    margin: 20px 1%;
    list-style: none;
    cursor: pointer;
}

img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border:1px solid grey;
}
.title{
   display: flex;
   font-size: 2em;
   margin-top: 20px;
}
</style>